﻿<%@ Page Title="" Language="C#" MasterPageFile="~/SiteRequireLogin.Master" AutoEventWireup="true" CodeBehind="Lich-Lam-Viec-Nhan-Vien.aspx.cs" Inherits="TranTekBE.KPI_NhanSu.Lich_Lam_Viec_Nhan_Vien" %>

<%@ Register Src="~/KPI-NhanSu/Menu-KPI.ascx" TagPrefix="uc1" TagName="MenuKPI" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="../Maintenance/css/bootstrap.css" rel="stylesheet" />
    <link href="../Maintenance/css/custom.css" rel="stylesheet" />
    <link href="../Maintenance/css/whmcs.css" rel="stylesheet" />

    <script src="../Scripts/jsLib.js" type="text/javascript"></script>

    <link rel="stylesheet" type="text/css" href="./styleschedule/main.css" />
    <link rel="stylesheet" type="text/css" href="./styleschedule/fullcalendar.css" />
    <link rel="stylesheet" type="text/css" href="./styleschedule/fullcalendar(1).css" />
    <script type="text/javascript" src="./styleschedule/fullcalendar.min.js"></script>
    <script type="text/javascript">
        var ToDay = new Date('<%=DateTime.Now.ToShortDateString()%>');
        //alert(ToDay);

    </script>
    <!---->
    <!------------------------------>
    <!--script auto complete ddl !-->
    <!------------------------------>

    <style type="text/css">
        .ui-button {
            margin-left: -1px;
        }

        .ui-button-icon-only .ui-button-text {
            padding: 0.35em;
        }

        .ui-autocomplete-input {
            margin: 0;
            padding: 0.48em 0 0.47em 0.45em;
            font: 10px;
        }

        .css_ca1 {
            color: #090;
            border-color: #090;
        }

        .disabled, .disabled * {
            /*background-color: #DADADA;*/
        }

        .item-disable {
            opacity: 0.5 !important;
        }
        .fc-event-title{
            font-size:10px;
        }
        div#wrapper {
            
            width: 96% !important;
        }
        #ui-datepicker-div {
            z-index: 9999999 !important;
            border: 1px solid #ccc;
        }
    </style>
    <!------------------------------>
    <!--End script auto complete ddl !-->
    <!------------------------------>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="BodyContent" runat="server">
    <div id="schedule_user" style="margin-top: 60px; position: absolute;width: 100%">
        <!--Menu-->
        <uc1:MenuKPI runat="server" ID="MenuKPI" />
        <!--Menu-->
        <div style="margin-top: 20px; margin-left: 0px; width: 100%; border: 1px solid; padding: 10px; margin-bottom: 50px">
            <strong style="color: #222; margin-bottom: 5px; background-color: #006796; color: #fff; padding: 11px;">Lịch Biểu Làm Việc tại Pharmacity</strong>
            <div style="margin-top: 30px">
                <asp:DropDownList ID="droplist_cua_hang_loc_kq" runat="server" AutoPostBack="true" OnSelectedIndexChanged="droplist_cua_hang_loc_kq_SelectedIndexChanged">
                </asp:DropDownList>
                <div class="demo" style="width: 202px; float: left;">
                    <div class="ui-widget">

                        <asp:DropDownList ID="droplist_ten_nhan_vien_loc_kq" runat="server" placeholder="Chọn tên nhân viên" OnSelectedIndexChanged="droplist_ten_nhan_vien_loc_kq_SelectedIndexChanged">
                        </asp:DropDownList>

                    </div>
                    <button id="toggle" style="display: none">Show underlying select</button>
                </div>
                <asp:TextBox ID="txt_StartTime" runat="server" AutoPostBack="true" placeholder="Chọn thời gian bắt đầu lọc" OnTextChanged="txt_StartTime_TextChanged"></asp:TextBox>
                <asp:TextBox ID="txt_EndTime" runat="server" AutoPostBack="true" placeholder="Chọn thời gian kết thúc lọc" OnTextChanged="txt_EndTime_TextChanged"></asp:TextBox>
            </div>
            <div id="calendar" style="margin-top: 15px;"></div>
        </div>
    </div>

    <script type="text/javascript">
        function LoadJS() {
            //
            $("#<%=txt_StartTime.ClientID %>").datepicker(
                    {
                        changeMonth: true,
                        changeYear: true,
                        showButtonPanel: true,
                        dateFormat: "mm/dd/yy",
                        monthNames: ["Tháng 1", "Tháng 2", "Tháng 3", "Tháng 4", "Tháng 5", "Tháng 6", "Tháng 7", "Tháng 8", "Tháng 9", "Tháng 10", "Tháng 11", "Tháng 12"],
                        monthNamesShort: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
                        dayNamesMin: ["CN", "Th2", "Th3", "Th4", "Th5", "Th6", "Th7"],
                        dayNamesShort: ["CN", "Th2", "Th3", "Th4", "Th5", "Th6", "Th7"],
                        dayNames: ["Chủ Nhật", "Thứ 2", "Thứ 3", "Thứ 4", "Thứ 5", "Thứ 6", "Thứ 7"],
                        beforeShow: function () {
                            $(".ui-datepicker").css('font-size', 12)
                        }
                    }
                    );
            $("#<%=txt_EndTime.ClientID %>").datepicker(
                    {
                        changeMonth: true,
                        changeYear: true,
                        showButtonPanel: true,
                        dateFormat: "mm/dd/yy",
                        monthNames: ["Tháng 1", "Tháng 2", "Tháng 3", "Tháng 4", "Tháng 5", "Tháng 6", "Tháng 7", "Tháng 8", "Tháng 9", "Tháng 10", "Tháng 11", "Tháng 12"],
                        monthNamesShort: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
                        dayNamesMin: ["CN", "Th2", "Th3", "Th4", "Th5", "Th6", "Th7"],
                        dayNamesShort: ["CN", "Th2", "Th3", "Th4", "Th5", "Th6", "Th7"],
                        dayNames: ["Chủ Nhật", "Thứ 2", "Thứ 3", "Thứ 4", "Thứ 5", "Thứ 6", "Thứ 7"],
                        beforeShow: function () {
                            $(".ui-datepicker").css('font-size', 12)
                        }
                    }
                    );
        }
    </script>

    <script type="text/javascript">
        function ChangColor() {

            $(".fc-event-title").each(function (i) {
                text = $(this).html();
                if (text.startsWith("Ca:1")) {
                    $(this).parent("div").parent("div").addClass("css_ca1");

                }

            })
        }
    </script>


    <script type="text/javascript">
        $(document).ready(function () {

            $(document).on("click", ".delevent", function (e) {
                //e.stopPropagation();
                $("#Dialog01").dialog("close");
                id = $(this).attr("eventid");
                if (confirm("Bạn chắc chắn xóa lịch này?")) {


                    $.ajax({
                        url: "Lich-Lam-Viec-Nhan-Vien.aspx/DelEvent",
                        data: "{ 'idevent':'" + id + "' }",
                        dataType: "text",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        // dataFilter: function (data) { return data; },
                        success: function (data) {
                            //response($.map(data.d, function (item) {
                            //    return { value: item }
                            //}))
                            //alert(data.d);
                            //console.log(dataLoadJS);
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                    $.post("Lich-Lam-Viec-Nhan-Vien.aspx/DelEvent", { idevent: id }, function (data) {
                        //alert(data);
                        $('#calendar').fullCalendar('removeEvents', id);
                    });
                }
                return false;

            });
            $('#calendar').fullCalendar({
                //Get Data
                monthNames: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10 ', 'Tháng 11', 'Tháng 12'],
                monthNamesShort: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10 ', 'Tháng 11', 'Tháng 12'],
                dayNames: ['Chủ Nhật,', 'Thứ 2,', 'Thứ 3,', 'Thứ 4,', 'Thứ 5,', 'Thứ 6,', 'Thứ 7,'],
                dayNamesShort: ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'],
                //
                buttonText: {
                    today: 'Hôm nay',
                    day: 'Ngày',
                    week: 'Tuần',
                    month: 'Tháng'
                },
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                titleFormat: {
                    month: 'MMMM yyyy',
                    week: "d[ MMMM][ yyyy]{ - d MMMM yyyy}",
                    day: 'dddd d MMMM yyyy'
                },
                events: [<%=JsonStringSchedule%>],
                eventClick: function (calEvent, jsEvent, view) {
                    console.log($(this).html());

                    //alert(calEvent.title);
                    //var TitleClickEvent = calEvent.title;
                    //var DateCLickEvent = (calEvent.start.getMonth() + 1) + '/' + calEvent.start.getDate() + '/' + calEvent.start.getFullYear();
                    var IdClickEvent = calEvent.id;
                    //alert(TitleClickEvent +","+ DateCLickEvent +","+ IdClickEvent);
                    //ajax save data when move the event

                    if (calEvent.start >= ToDay) {

                        OpenDialog("Chỉnh Sửa Lịch Làm Việc Nhân Viên", "Chinh-Sua-Lich-Lam-Viec-Nhan-Vien.aspx?idevent=" + IdClickEvent, 400, 400);
                    }
                },//
                eventRender: function (event, element) {
                    if (event.start >= ToDay) {
                        element.find('.fc-event-inner').append("<div class='delevent' eventid='" + event.id + "' onclick='return false;'></div>");
                        if (event.innerHtml != null) {
                            element.find('.fc-event-inner').append(event.innerHtml);
                        }
                    }
                    else {
                        element.find('.fc-event-inner').parent("div").addClass("item-disable");
                    }

                },

                editable: true, // allow move job to other date


                dayClick: function (date, jsEvent, view) {
                    var getday = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
                    //alert(getday);
                    if (date >= ToDay) {
                        OpenDialog("Thêm Lịch Làm Việc Nhân Viên", "Them-Lich-Lam-Viec-Nhan-Vien.aspx?dateadd=" + getday, 400, 400);
                    }

                },
                eventAfterAllRender: function ()
                { ChangColor(); },
                dayRender: function (date, cell) {
                    if (date < ToDay) {
                        $(cell).addClass('disabled');
                    }
                },
                eventDrop: function (event, posision) {
                    var UserName = event.title;
                    var Date = (event.start.getMonth() + 1) + '/' + event.start.getDate() + '/' + event.start.getFullYear();
                    var ID_Lich = event.id;
                    //console.log(event);
                    if (event.start >= ToDay) {
                        //ajax save data when move the event
                        $.ajax({
                            url: "Lich-Lam-Viec-Nhan-Vien.aspx/UpdateCalendar",
                            data: "{ 'value': '" + UserName + "','date':'" + Date + "','idlich':'" + ID_Lich + "' }",
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            dataFilter: function (data) { return data; },
                            success:
                            function (data) {
                                if (data.d != 1) {
                                    alert("Lịch đã trùng lặp");
                                    location.reload();
                                }
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                alert(textStatus);
                            }
                        });
                    }
                    else {
                        alert("Bạn không thể chỉnh sửa lịch ở quá khứ!");
                        location.reload();
                    }

                }
            });

        });




	</script>
    <!--End js Schedule-->
    <script type="text/javascript">
        //-----------------------------------------------
        //script auto complete ddl
        //-----------------------------------------------
        function optionSelected(selectedValue) {
            document.title = selectedValue;
        }

        (function ($) {
            $.widget("ui.combobox", {
                _create: function () {
                    var self = this,
                               select = this.element.hide(),
                               selected = select.children(":selected"),
                               value = selected.val() ? selected.text() : "";
                    var input = this.input = $("<input placeholder='Chọn tên nhân viên để xem' style='width: 190px'>")
                               .insertAfter(select)
                               .val(value)
                               .autocomplete({
                                   delay: 0,
                                   minLength: 0,
                                   source: function (request, response) {
                                       var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                                       response(select.children("option").map(function () {
                                           var text = $(this).text();
                                           if (this.value && (!request.term || matcher.test(text)))
                                               return {
                                                   label: text.replace(
                                                                        new RegExp(
                                                                               "(?![^&;]+;)(?!<[^<>]*)(" +
                                                                               $.ui.autocomplete.escapeRegex(request.term) +
                                                                               ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                                                        ), "$1"),
                                                   value: text,
                                                   option: this
                                               };
                                       }));
                                   },
                                   select: function (event, ui) {
                                       ui.item.option.selected = true;
                                       self._trigger("selected", event, {
                                           item: ui.item.option
                                       });
                                       //JK
                                       optionSelected(ui.item.option.value);
                                       javascript: setTimeout('__doPostBack(\'ctl00$BodyContent$droplist_cua_hang_loc_kq\',\'\')', 0);

                                   },
                                   change: function (event, ui) {
                                       if (!ui.item) {
                                           var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                                                           valid = false;
                                           select.children("option").each(function () {
                                               if ($(this).text().match(matcher)) {
                                                   this.selected = valid = true;
                                                   return false;
                                               }
                                           });
                                           if (!valid) {
                                               // remove invalid value, as it didn't match anything
                                               $(this).val("");
                                               select.val("");
                                               input.data("autocomplete").term = "";
                                               return false;
                                           }
                                       }
                                   }
                               })
                               .addClass("ui-widget ui-widget-content ui-corner-left");

                    input.data("autocomplete")._renderItem = function (ul, item) {// Err JS
                        return $("<li></li>")
                                      .data("item.autocomplete", item)
                                      .append("<a>" + item.label + "</a>")
                                       .appendTo(ul);
                    };

                    this.button = $("<button type='button'>&nbsp;</button>")
                               .attr("tabIndex", -1)
                               .attr("title", "Show All Items")
                               .insertAfter(input)
                               .button({
                                   icons: {
                                       primary: "ui-icon-triangle-1-s"
                                   },
                                   text: false
                               })
                               .removeClass("ui-corner-all")
                               .addClass("ui-corner-right ui-button-icon")
                               .click(function () {
                                   // close if already visible
                                   if (input.autocomplete("widget").is(":visible")) {
                                       input.autocomplete("close");
                                       return;
                                   }

                                   // pass empty string as value to search for, displaying all results
                                   input.autocomplete("search", "");
                                   input.focus();
                               });
                },

                destroy: function () {
                    this.input.remove();
                    this.button.remove();
                    this.element.show();
                    $.Widget.prototype.destroy.call(this);
                }
            });
        })(jQuery);

        $(function () {
            $("#<%= droplist_ten_nhan_vien_loc_kq.ClientID%>").combobox();
            $("#toggle").click(function () {
                $("#<%= droplist_ten_nhan_vien_loc_kq.ClientID%>").toggle();
            });
        });
        //-----------------------------------------------
        //End script auto complete ddl
        //-----------------------------------------------

    </script>
    <br />
    <br />
</asp:Content>
